<template>
  <div class="pastRecords">
    <main-content title="消息历史" back>
      <div class="pastRecords-content">
        <!-- el-dropdown下拉菜单 -->
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ currentType == 'all' ? '全部' : (currentType == 'activity_expire' ? '活动到期' : '库存不足') }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="all">全部</el-dropdown-item>
              <el-dropdown-item command="activity_expire">活动到期</el-dropdown-item>
              <el-dropdown-item command="stock_defect">库存不足</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- listBox消息列表 -->
        <div class="listBox" v-loading="loading">
          <div class="listBox-items" v-for="(item, index) in pastRecordsData" :key="index">
            <div class="left"></div>
            <div class="right">
              <p class="top">
                {{ item.content }}
              </p>
              <p class="bottom">
                {{ new Date(item.createTime).format("yyyy-MM-dd") }}
              </p>
            </div>
          </div>
        </div>
        <!-- pagination列表分页 -->
        <div class="pagination">
          <el-pagination 
            background 
            layout="prev, pager, next" 
            v-model:total="total" 
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </main-content>  
  </div>
</template>

<script>
// API
import { merchantMessageCenterList } from '@/api/messageCenter/index.js';
export default {
  name: 'PastRecords',
  components: {

  },
  data() {
    return {
      loading: false,
      pastRecordsData: [],
      currentType: 'all',
      currentPage: 1,
      pageSize: 20,
      total: 1000
    }
  },
  mounted() {
    this.merchantMessageCenterListApi();
  },
  methods: {
    // 下拉选择
    handleCommand(val) {
      this.currentType = val;
      this.merchantMessageCenterListApi();
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.merchantMessageCenterListApi();
    },
    // 获取消息列表Api
    async merchantMessageCenterListApi() {
      this.loading = true;
      let res = await merchantMessageCenterList({
        pressType: this.currentType,
        currentPage: this.currentPage,
        showCount: 15
      })
      if(res.code === 200) {
        this.pastRecordsData = res.payload;
        this.total = res.page.totalResult;
      }
      this.loading = false;
    }
  },
  computed() {

  }
}
</script>

<style lang="scss" scoped>
.pastRecords {
  &-content {
    :deep(.el-dropdown) {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      .el-dropdown-link {
        font-weight: 900;
        margin-left: 16px;
      }
    }
    .listBox {
      // width: 100%;
      height: 666px;
      padding: 0 16px;
      overflow-y: scroll;
      overflow-x: hidden;
      margin-bottom: 30px;
      &-items {
        width: 100%;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0;
        }
        .left {
          width: 36px;
          height: 36px;
          background: url('') center no-repeat;
          box-sizing: border-box;
          border-radius: 40px;
          background-color: #ebf2ff;
          background-size: 24px;
        }
        .right {
          width: 100%;
          margin-left: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .top {
            width: 80%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
            font-family: PingFang SC;
            font-size: 14px;
          }
          .bottom {
            font-family: PingFang SC;
            font-size: 14px;
            margin-right: 10px;
          }
        }
        &:hover {
          background: rgb(239, 239, 245);
          border-radius: 4px;
        }
      }
    }
    .pagination {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>